<template>
  <div class="updatePie">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">预案更新类型统计</div>
      <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
          color="#fff"></i></a>
    </div>
    <div class="updateCenter" style="width: 100%;height:100%">
      <div id="chartsContents" style="width: 100%;height:100%"></div>
      <!-- <div class="flex flexAround" style="width:50%;margin:auto;margin-bottom:20px">
        <div v-for="(item, index) in optionData" :key="index">
          <span class="pie_bottom" :style="{ backgroundColor: item.color, 'margin-right': '10px' }"></span>
          <span class="white fontSize12">{{ item.name }}</span>
        </div>
      </div> -->
    </div>

  </div>
</template>
<script>
import { typeAnalysisApi } from "@/api/EmengercyPlan/homepagecontent";

export default {
  name: "UpdatePie",
  components: {

  },
  data() {
    return {
      optionData: [
        {
          name: "更新提醒",
          y: 15,
          color: "#F7A35C"
        }, {
          name: "正常预案",
          y: 80,
          color: "#90ED7D"
        }, {
          name: "超期提醒",
          y: 5,
          color: "#D94643"
        }],
      selectedIndex: "",
      hoveredIndex: ""
    };
  },
  mounted() {
    // this.initCharts();
    this.getTypeAnalysis();
    // this.$nextTick(() => {
    //   const parent = document.getElementById("chartsContents"); // 获取父元素
    //   const canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
    //   console.log(canvas);
    //   canvas[0].attributes.style.transform = "rotateX(30deg)";
    // });
  },
  methods: {
    getTypeAnalysis() {
      typeAnalysisApi({}).then(res => {
        const stasticss = res;
        const array = [];
        const color = [{ name: "正常", color: "#90ED7D" }, { name: "更新提醒", color: "#F7A35C" }, { name: "超期提醒", color: "#D94643" }];
        stasticss.forEach((element) => {
          array.push({
            y: element.number,
            name: element.remindStr,
            color: element.color
          });
        });
        array.forEach((element) => {
          element.color = color.find(item => item.name == element.name).color;
        });
        this.optionData = array;
        console.log("optionData", this.optionData);
        this.initCharts();
      });
    },
    // 跳转预案管理列表
    goRouter(name) {
      this.$router.push({
        name: "PlanManagement"
      });
    },
    initCharts() {
      let total = 0;
      for (let i = 0; i < this.optionData.length; i++) {
        total += this.optionData[i].y;
      }
      this.$Highcharts.chart("chartsContents", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          bottom: "5%",
          right: "center",
          align: "center",
          symbolHeight: 16,
          symbolWidth: 20,
          symbolRadius: 5,
          itemStyle: {
            color: "#ffffff",
            fontSize: 14
          },
          itemHoverStyle: {
            color: "#ffffff",
            cursor: "default"
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            point: {
              events: {
                legendItemClick: function (e) {
                  return false; // 直接 return false 即可禁用图例点击事件（实现点击图例后，不能再默认地显示隐藏当前图例在图表里的对应数据）
                }
              }
            },
            depth: 40,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "65%",
            startAngle: -30, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.optionData
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 35px;font-weight:bold;color:#fff">${total}</span><br/><span style="font-size: 18px;color:#fff">总数</span>`,
          x: 0,
          y: 130
        },
        title: {
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#5EE855", "#EEEA71", "#4FD2FD"]
      });



      // let total = 0;
      // for (let i = 0; i < this.optionData.length; i++) {
      //   // delete this.optionData[i].itemStyle.opacity;
      //   total += this.optionData[i].value;
      // }
      // document.getElementById("totalIds").innerHTML = `${total}篇`;

      // // 传入数据生成 option
      // const series = getPie3D(this.optionData, 2);
      // const option = {
      //   //   color: ["#D94643", "#F7A35C", "#90ED7D"],
      //   // legend: {
      //   //   top: "10",
      //   //   textStyle: {
      //   //     color: "#fff"
      //   //   },
      //   //   data: this.legendData
      //   // },
      //   tooltip: {
      //     backgroundColor: "rgba(0, 0, 0, .5)",
      //     borderWidth: 0,
      //     formatter: (params) => {
      //       // console.log("params", params);
      //       // console.log("number", option.series[params.seriesIndex].pieData);
      //       if (
      //         /*  params.seriesName !== "mouseoutSeries" && */
      //         params.seriesName !== "pie2d"
      //       ) {
      //         return `<div style="padding:0 10px;color:#fff"><span style="display:inline-block;margin-right:20px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${params.seriesName} ${option.series[params.seriesIndex].pieData.value}篇${option.series[params.seriesIndex].pieData.proportion * 100}%</div>`;
      //       }
      //     }
      //   },
      //   xAxis3D: {
      //     min: -1,
      //     max: 1
      //   },
      //   yAxis3D: {
      //     min: -1,
      //     max: 1
      //   },
      //   zAxis3D: {
      //     min: -1,
      //     max: 1
      //   },
      //   grid3D: {
      //     show: false, // 是否显示三维笛卡尔坐标系。
      //     boxHeight: 15, // 三维笛卡尔坐标系在三维场景中的高度
      //     top: "-3%",
      //     // bottom: "80%",
      //     // environment: "#021041", //背景
      //     viewControl: {
      //       // 用于鼠标的旋转，缩放等视角控制
      //       alpha: 55, // 角度
      //       distance: 270, // 调整视角到主体的距离，类似调整zoom 重要
      //       rotateSensitivity: 0, // 设置为0无法旋转
      //       zoomSensitivity: 0, // 设置为0无法缩放
      //       panSensitivity: 0, // 设置为0无法平移
      //       autoRotate: false // 自动旋转
      //     }
      //   },
      //   series: series
      // };
      // this.myChart = this.$echarts.init(document.getElementById("chartsContents")); // 图标初始化
      // this.myChart.setOption(option); // 渲染页面

      // this.myChart.on("mouseover", (params) => {
      //   let isSelected;
      //   let isHovered;
      //   let startRatio;
      //   let endRatio;
      //   let k;
      //   console.log("this.hoveredIndex", this.hoveredIndex);
      //   // 如果触发 mouseover 的扇形当前已高亮，则不做操作
      //   if (this.hoveredIndex === params.seriesIndex) {
      //     return;
      //     // 否则进行高亮及必要的取消高亮操作
      //   } else {
      //     // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      //     if (this.hoveredIndex !== "") {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
      //       console.log("更新option", option);
      //       console.log("更新hoveredIndex", this.hoveredIndex);
      //       isSelected = option.series[this.hoveredIndex].pieStatus.selected;
      //       isHovered = false;
      //       startRatio = option.series[this.hoveredIndex].pieData.startRatio;
      //       endRatio = option.series[this.hoveredIndex].pieData.endRatio;
      //       k = option.series[this.hoveredIndex].pieStatus.k;

      //       // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //       option.series[this.hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, 15);
      //       option.series[this.hoveredIndex].pieStatus.hovered = isHovered;
      //       // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //       this.hoveredIndex = "";
      //     }

      //     // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      //     if (params.seriesName !== "pie2d") {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //       isSelected = option.series[params.seriesIndex].pieStatus.selected;
      //       isHovered = true;
      //       startRatio = option.series[params.seriesIndex].pieData.startRatio;
      //       endRatio = option.series[params.seriesIndex].pieData.endRatio;
      //       k = option.series[params.seriesIndex].pieStatus.k;
      //       // 对当前点击的扇形，执行高亮操作（对 option 更新）
      //       option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, 22);
      //       option.series[params.seriesIndex].pieStatus.hovered = isHovered;

      //       // 记录上次高亮的扇形对应的系列号 seriesIndex
      //       this.hoveredIndex = params.seriesIndex;
      //     }
      //     // 使用更新后的 option，渲染图表
      //     this.myChart.setOption(option);
      //   }
      // });
      // this.myChart.on("globalout", () => {
      //   if (this.hoveredIndex !== "") {
      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //     const isSelected = option.series[this.hoveredIndex].pieStatus.selected;
      //     const isHovered = false;
      //     const k = option.series[this.hoveredIndex].pieStatus.k;
      //     const startRatio = option.series[this.hoveredIndex].pieData.startRatio;
      //     const endRatio = option.series[this.hoveredIndex].pieData.endRatio;

      //     // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //     console.log("isHovered", isHovered);
      //     option.series[this.hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, 15);
      //     option.series[this.hoveredIndex].pieStatus.hovered = isHovered;

      //     // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //     this.hoveredIndex = "";
      //   }
      //   this.myChart.setOption(option);
      // });


      // // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      // /*  option.series.push({
      //   name: "pie2d",
      //   type: "pie",
      //   label: {
      //     color: "#fff",
      //     fontSize: 16,
      //     opacity: 1,
      //     width: 250,
      //     //  position: 'inner',
      //     // formatter: "{b}\n\n",
      //     // padding: [0, -40],
      //     formatter: (item) => {
      //       // console.log("item.data", item.data);
      //       // return item.data.name + ":" + item.data.value + "篇" + "";
      //       return `{names|${item.data.name}}\n${item.data.value}篇 ${(item.data.proportion * 100).toFixed(0)}%`;
      //     },
      //     rich: {
      //       names: {
      //         fontSize: 16
      //       }
      //     }
      //   },
      //   labelLine: {
      //     length: 40,
      //     length2: 0,
      //     lineStyle: {
      //       width: 1.5
      //     }
      //   },
      //   startAngle: 339, // 起始角度，支持范围[0, 360]。 //重要
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ["50%", "50%"],
      //   center: ["50%", "60%"],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0
      //   },
      //   top: "-20%",
      //   avoidLabelOverlap: true // 防止标签重叠
      // }); */
      // this.myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="less">
.updatePie {
  height: 100%;
  border: 1px solid #0649d7;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.pie_bottom {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.cardTitle {
  background-color: #265cff;
  flex: 1;
}

.updateCenter {
  display: flex;
  flex-direction: column;
  position: relative;
}

.total {
  height: 85px;
  width: 85px;
  background-color: #0e3569;
  position: absolute;
  border-radius: 50px;
  transform: rotateX(38deg);
  top: 36%;
  left: 42%;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
  padding: 18px;
  box-sizing: border-box;
}

#totalIds {
  margin-left: 10px;
  display: inline-block;
  transform: rotateX(0deg);
}
</style>
